<template>
  <a-popover v-model="visible" placement="bottomLeft" trigger="click" v-if="refresh">
    <div slot="content" style="font-size: 13px">
      <div style="font-size: 18px;font-weight: bold;text-align: center;height: 35px">添加标签</div>
      <div style="font-size: 12px;color: #cfcfcf;height: 30px">最多可选择 <span style="color: red;">3</span> 个标签</div>
      <a-space class="overflow-invisible select-none" size="small" direction="vertical" style="max-height: 350px; overflow: auto; padding-top: 5px; ">
        <div style="color: #cfcfcf" v-for="(father, tagsIndex) in tags" :key="tagsIndex">
          {{ father.tagName }}
          <div class="ant-space ant-space-vertical" style="margin-left: 50px;color: black">
            <div class="ant-space-item" style="margin-bottom: 4px" v-for="(tag, index) in father.children" :key="index">
              <a-space class="tagSpace" size="small" v-if="index%4 === 0">
                <div v-if="father.children[item+index]" v-for="(item, i) in [0, 1, 2, 3]" :key="i">
                  <a
                    :class="tagIds != null && tagIds.split('/').indexOf(father.children[item+index].tagId+'') > -1 ? 'ant-tag-blue' : ''"
                    @click="chooseTag($event, father.children[item+index])">
                    {{ father.children[item+index].tagName }}
                  </a>
                </div>
              </a-space>
            </div>
          </div>
        </div>
      </a-space>
      <div style="text-align: center">
        <a-button style="border-radius: 15px;width: 75px" type="primary" @click="handleSubmit">完成</a-button>
      </div>
    </div>
    <a style="color: #507daf">{{ text }}</a>
  </a-popover>
</template>

<script>
  import { updateTagByPlaylist } from '@/api/music/playlist'

  export default {
    props: {
      playlistId: {
        type: Number,
        default () {
          return 0
        }
      },
      tags: {
        type: Array,
        default () {
          return []
        }
      },
      tagIds: {
        type: String,
        default () {
          return ''
        }
      },
      prevent: {
        type: Boolean,
        default () {
          return false
        }
      }
    },
    data () {
      return {
        visible: false,
        refresh: true,
        chooseTags: [],
        tagNames: [],
        text: '添加标签'
      }
    },
    mounted () {
      this.init()
    },
    watch: {
      visible: function (val) {
        if (!val) {
          this.refresh = false
          setTimeout(() => {
            this.chooseTags = this.tagIds.split('/').filter(v => v)
            this.refresh = true
          }, 1)
        }
      }
    },
    methods: {
      init () {
        if (this.tagIds === null || this.tagIds === '') {
          this.text = '添加标签'
          return
        }
        this.chooseTags = this.tagIds.split('/')
        const tagNames = []
        for (let i = 0; i < this.tags.length; i++) {
          const tag = this.tags[i].children
          for (let j = 0; j < tag.length; j++) {
            if (this.chooseTags.indexOf(tag[j].tagId + '') > -1) {
              tagNames.push(tag[j].tagName)
            }
          }
        }
        this.text = tagNames.join('/')
      },
      chooseTag (e, tag) {
        const classList = e.currentTarget.classList
        const tagId = tag.tagId
        if (!classList.contains('ant-tag-blue')) {
          if (this.chooseTags.length < 3) {
            e.currentTarget.classList.add('ant-tag-blue')
            this.chooseTags.push(tagId + '')
          } else {
            console.log(this.chooseTags)
            this.$message.warning('至多选择3个标签')
          }
        } else {
          e.currentTarget.classList.remove('ant-tag-blue')
          const index = this.chooseTags.indexOf(tagId + '')
          this.chooseTags.splice(index, 1)
        }
      },
      handleSubmit () {
        let tagIds = this.chooseTags.join('/')
        console.log(this.chooseTags)
        if (tagIds === '') {
          tagIds = null
        }
        if (this.prevent) {
          this.visible = false
          this.$emit('ok', tagIds)
        }
        updateTagByPlaylist({ 'playlistId': this.playlistId, 'tagIds': tagIds })
          .then(res => {
            if (res.data.message !== 'error') {
              this.visible = false
              this.$emit('ok', tagIds)
            } else {
              this.$message.error('操作失败！')
            }
          })
      }
    }
  }
</script>

<style lang="less">
  ::v-deep .ant-tooltip-inner {
    font-size: 1px !important;
  }
  .tagSpace {
    div {
      width: 110px;
      a {
        padding: 5px 20px;
        color: black;
        border: solid 1px white;
        border-radius: 20px;
      }
    }
  }
</style>
